const path = require('path')
//自动生成 文件打包引入
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry:{
        path:'./src/index.js'
    },

    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'./dist'),
        clean:true,
        assetModuleFilename:'images/[contenthash][ext][query]'
    },
    //生产环境
    mode:'development',
    //用来配置打包模式
    devtool: 'inline-source-map',
    
    plugins: [
        // 实例化 html-webpack-plugin 插件
        new HtmlWebpackPlugin({
            favicon: './src/favicon.ico',
            title: 'myApp',
            template: './index.html', // 打包生成的文件的模板
            filename: 'app.html', // 打包生成的文件名称。默认为index.html
            // 设置所有资源文件注入模板的位置。可以设置的值
            //true|'head'|'body'|false，默认值为 true
            inject: 'body',
        })
    ],

    //配置webpack-dev-server
    devServer:{
        static:'./dist'
    },

    // 配置资源文件
    module: {
        rules: [
            {
                test: /\.png$/,
                type: 'asset/resource',
                generator:{ //配置文件输出路径及其文件名，优先级高于output配置中的配置
                    filename: 'images/[contenthash][ext][query]',
                }
            },
            {
                test:/\.jpg$/,
                type: 'asset/inline',
            },
            {
                test:/\.txt$/,
                type: 'asset/source',
            },
            {
                test:/\.jpeg$/,
                type: 'asset',
                parser: { //当文件小于2000kb 就通过inline方式打包，否则就通过resource方式编码打包
                    dataUrlCondition:{
                        maxSize: 2000 * 1024
                    }
                }
            },

    ]
    },
    
}